<template>
  <view class="container">
    <view class="header">
      <!-- 首页轮播图 -->
      <swiper
        class="swiper"
        indicator-dots
        indicator-color="pink"
        indicator-active-color="yellowgreen"
        autoplay
        interval="2000"
        circular
      >
        <swiper-item>
          <image
            class="banner"
            src="https://pic.rmb.bdstatic.com/bjh/240803/events/97a442513064b871dc6436338d01122b6667.jpeg@h_1280"
          />
        </swiper-item>
        <swiper-item>
          <image
            class="banner"
            src="https://pic1.zhimg.com/v2-4e8f07d6f0c933ff0157d3cbb36c5322_r.jpg"
          />
        </swiper-item>
        <swiper-item>
          <image
            class="banner"
            src="https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"
          />
        </swiper-item>
      </swiper>
    </view>
    <view class="ability">
      <view v-for="(item, index) in 5" :key="index" class="abilityItem">
        <text>失物招领</text>
      </view>
    </view>
    <view class="like">
      <text>猜你想看</text>
    </view>
    <!-- 主要内容区 -->
    <view class="main" v-for="(item,index) in 6" :key="index">
      <view class="content">
        <img
          class="avatar"
          src="https://img1.baidu.com/it/u=2367209091,3333849819&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
          alt=""
        />:
        <text>我在二教1125丢失一把钥匙和笔求大家帮帮忙!哈哈哈</text>
      </view>
      <view class="description">
        <view class="item">
          <img class="itemImg" src="https://pic.rmb.bdstatic.com/bjh/news/03b148a9c5d314f2731cd1c194115769.jpeg" alt="" />
        </view>
        <view class="item">
          <img class="itemImg"  src="https://pic.rmb.bdstatic.com/bjh/news/03b148a9c5d314f2731cd1c194115769.jpeg" alt="" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
    };
  },
  onLoad() {},
  methods: {},
};
</script>

<style scrop >
.container {
  width: 750rpx;
}
.header {
  width: 750rpx;
}
.swiper {
  width: 100%;
}
.swiper .banner {
  width: 100%;
  
}
.ability {
  width: 95%;
  margin: 0 auto;
  height: 150rpx;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  /* background: pink; */
}
.abilityItem {
  width: 140rpx;
  height: 100rpx;
  background-color: #3498db;
  border: 4rpx solid #100;
  text-align: center;
  line-height: 100rpx;
}
.like{
  background-color:aqua;
  text-align: center;
  margin:0 auto;
  width:95%;
  font-weight: 700;
  font-size:50rpx;
}
.main {
  width: 95%;

  margin: 0rpx auto;
  border: 2rpx solid pink;
  border-radius: 3%;
}
.main .avatar {
  width: 50rpx;
  height: 50rpx;
  border: 1px solid pink;
  border-radius: 50%;
}
.content {
  border: 2px solid red;
}
.description {
  display: flex;
  flex-wrap: wrap;
  width:100%;
}
.item{
  margin-left:24rpx
}
.description .itemImg{
  width:320rpx;
  height:320rpx
}
</style>
